<template>
  <div>
    <!-- 头像信息区块 -->
    <van-row @click="openShowModel">
      <van-col span="6">
        <img :src="avator" alt="" />
      </van-col>
      <van-col span="16">{{nickname}}</van-col>
      <van-col span="2"><van-icon name="arrow"/></van-col>
    </van-row>
    <!-- 我的功能区块 -->
    <van-grid :column-num="3">
      <van-grid-item @click="toFun" icon="label-o" text="我的订单" />
      <van-grid-item @click="toFun" icon="bill-o" text="优惠券" />
      <van-grid-item @click="toFun" icon="goods-collect-o" text="礼品卡" />
      <van-grid-item @click="toFun" icon="gift-o" text="我的收藏" />
      <van-grid-item @click="toFun" icon="flag-o" text="我的足迹" />
      <van-grid-item @click="toFun" icon="contact" text="会员福利" />
      <van-grid-item @click="toFun" icon="aim" text="地址管理" />
      <van-grid-item @click="toFun" icon="warn-o" text="账号安全" />
      <van-grid-item @click="toFun" icon="service-o" text="联系客服" />
      <van-grid-item @click="toFun" icon="question-o" text="帮助中心" />
      <van-grid-item @click="toFun" icon="smile-comment-o" text="意见反馈" />
    </van-grid>

    <transition name="van-fade" mode="out-in">
      <!-- 模态框区块 -->
      <div class="model_login" v-if="showModel">
        <div class="mark" @click="showModel = false"></div>
        <!-- S登录模块 -->
        <van-form @submit="onSubmit">
          <!-- 用户名 -->
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <!-- 密码 -->
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
        <!--E登录模块 -->
      </div>
    </transition>
  </div>
</template>
<script>
import { Login } from "@/request/api";
export default {
  data() {
    return {
      avator: require("@/assets/avator.jpeg"),
      username: "",
      password: "",
      showModel: false,
      nickname:"点击登录",
    };
  },
  created(){
    let token = window.sessionStorage.getItem("token");
    if(token){
      let userInfo = window.sessionStorage.getItem("userInfo");
      let newUserInfo = JSON.parse(userInfo);
      this.nickname = newUserInfo.username
      this.avator = newUserInfo.avatar
    }
    
    
    
  },
  methods: {
    //登录
    onSubmit(values) {
      Login({
        username: values["用户名"],
        pwd: values["密码"],
      }).then((res) => {
        if (res.errno == 0) {
          let { token, userInfo } = res.data;
          let newUserInfoStr = JSON.stringify(userInfo);
          window.sessionStorage.setItem("token", token);
          window.sessionStorage.setItem("userInfo", newUserInfoStr);
          this.nickname = userInfo.username
          this.avator = userInfo.avatar 
          this.$toast.success("登录成功");
          setTimeout(() => {
            this.showModel = false;
          }, 1000);
        }
      });
    },
    //打开登陆拟态框
    openShowModel(){
      let token = window.sessionStorage.getItem("token");
      if(!token){
        this.showModel = true;
      }
    },
    toFun(){
      this.$toast("该功能暂未开放")
    }
  },
};
</script>
<style lang="less" scoped>
.van-row {
  background-color: #333;
  padding: 0.1rem 2%;
  box-sizing: border-box;
  color: #fff;
  .van-col {
    font-size: 0.18rem;
    line-height: 0.8rem;
    img {
      display: block;
      width: 0.8rem;
      border-radius: 50%;
    }
  }
}
.model_login {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99;
  .mark {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.86);
    z-index: 100;
  }
  .van-form {
    box-sizing: border-box;
    position: absolute;
    z-index: 101;
    width: 90%;
    top: 30vh;
    left: 50%;
    margin-left: -45%;
    padding: 0.08rem;
    background-color: #fff;
  }
}
</style>
